<script setup lang="ts">
import { computed, inject } from "vue";
import { sendSocketIoMsg } from "@renderer/api/request";
import { getActiveTabViewOp } from "@renderer/view/hooks/common";

const {
  currentViewSliceInfo:sliceInfo,
} = inject('tabInfo') as any;

const {
  activeViewRef: activeView
} = getActiveTabViewOp()

const handleChange = (val) => {
  const msg = {
    viewType: activeView.value.viewType,
    opType: 'scrollTo',
    toIndex: -val
  };
  sendSocketIoMsg(msg)
}

const reverseSliceIndex = computed({
  get:() => {
    return -sliceInfo.value.current;
  },
  set: (val) => {
    sliceInfo.value.current = -val;
  }
})

</script>

<template>
  <v-slider
    class="custom-slider flex! h-full flex-col! "
    v-model="reverseSliceIndex"
    :max="-1"
    :step="1"
    @end="handleChange"
    :min="-sliceInfo.total"
    direction="vertical"
  >

  </v-slider>
</template>

<style scoped>

</style>
